misc

A COMPLETE GUIDE TO MARKDOWN

Your complete guide to the Markdown language. Use it as a reference for your static website or GitHub README files.

Philip Mannering // 2021 November

Titles and Subtitles

This is Heading 1

## This is Heading 2

### This is Heading 3

#### This is Heading 4

##### This is Heading 5
###### This is Heading 6

Markdown is the simplest way to create a static website. It is a plain text format that is easy to read and write. Indeed, the page you're reading now was initially typed up in Markdown. You can then use this Python-Markdown module to convert this to HTML. Then use Jinja2 to insert into an HTML template. Indeed this is what I've used to create the webpage you're reading now.

Horizontal Rule

A horizontal rule is three or more dashes ---, asterisks ***, or underscores ___


Text Styling

Get bold or italic text by surrounding text with asterisks * or underscores _

This is *italic*. This is **bold**. This is ***bold and italic***. The complete list of styling text inlined in markdown is:

Style Syntax Result
Italic *datatype* or _datatype_ datatype
Bold **datatype** or __datatype__ datatype
Bold italic ***datatype*** or ___datatype___ datatype
Inline code `dataatype` datatype
Strikethrough ~~datatype~~ datatype

Tables

Tables are much simpler in Markdown than they are in HTML. Simply add a few pipes | to separate the columns and a row of dashes --- to separate the headers with the values. On this row you can use the : character to align the columns.

Left | Center | Right
:----|:------:|------:
Value | Value | Value
Value | Value | Value

Becomes,

Left Center Right
Value Value Value
Value Value Value

Lists

Unordered Lists

Create an unordered list with a dash -, plus + or asterisk * at the beginning of each line.

- list item
- list item
  - list item
    - list item
  - list item
- list item

Ordered Lists

Create an ordered list with any number and a period. Any number can be used (e.g. all 1.) and markdown will automatically number the list appropriately

1. List item
1. List item
  1. List item
    1. List item
  1. List item
1. List item

  1. List item
  2. List item
    1. List item
      1. List item
    2. List item
  3. List item

Block Quote

Create a block quote by starting each line with a >

> This is a block quote.
> This is the same block quote.

To produce,

This is a block quote.
This is the same block quote.

Code

Create inline code by surrounding text with single backticks `, e.g. `E = mc^2`.

A code block uses three backticks or three tildes to delimit the code.

```python
# print 'hello' 10 times
for i in range(10):
  print('hello')
```

To produce,

# print 'hello' 10 times
for i in range(10):
    print('hello')

Links

The markdown syntax for creating links is:

This is a link: [Wikipedia](https://en.wikipedia.org/wiki/Markdown).

To produce,

This is a link: Wikipedia.

Images

The markdown syntax for creating images is:

This is an image: ![](/images/blog/solar_system.png)

This is an image:

Markdown Extra

It is possible to get additional markdown support with the Markdown Extra extension. You can find a list of the available features here.

Abbreviations

Declare some abbreviations (which are also useful for tooltip definitions) and then use them in your text,

*[MD]: Markdown
*[HTML]: Hypertext Markup Language
*[CSS]: Cascading Style Sheets

This page is written in MD, converted to HTML and styled with CSS.

To produce,

This page is written in MD, converted to HTML and styled with CSS.

Attribute List

Create custom classes by adding {: .classname} after a markdown element.

For example,

This is a highlighted paragraph
{.highlight}

To produce (with CSS styling),

This is a hightlighted paragraph

Definition Lists

Create definition lists with,

Mercury
: The smallest planet in the solar system.

Venus
: The second smallest planet in the solar system.

Earth
: The third planet from the sun.
: The red planet.
: Where the martians are from.

To produce,

Mercury
The smallest planet in the solar system.
Venus
The second smallest planet in the solar system.
Earth
The third planet from the sun.
Mars
The fourth planet from the sun.
The red planet.
Where the martians are from.

Admonition

Create some admonitions / alerts with:

!!! warning
This is a warning message.
This is a warning message.
This is a warning message.

!!! danger
This is a danger message.

!!! info
This is information message.

!!! success
This is a success message.

Warning

This is a warning message.
This is a warning message.
This is a warning message.

Danger

This is a danger message.

Info

This is an information message.

Success

This is a success message.

Using HTML

You can also just use plain html in your markdown text. This html (with some CSS) can be used to create columns,

<div class="row" markdown=1>
<div class="col" markdown=1>
# Left
The paragraph on the left
</div>
<div class="col" markdown=1>
# Right
The paragraph on the right
</div>
</div>

The markdown=1 attribute is included to write markdown inside html elements. The result is,

Left

The paragraph on the left

Right

The paragraph on the right